<template>
  <div class="webGame-body">
    <backTo-view :child-msg="current"></backTo-view>
    <!--<div class="header comheader">
      <i class="i-back"></i>
      <span>网络游戏</span>
      <div class="fr">
        <input type="text" class="xs-search" />
        <i class=" i-home"></i>
      </div>
    </div>-->
    <div class="com-nav">
      <ul class="cf">
        <li :class="{active:flag}" @click="select"> 最新排序 </li>
        <li :class="{active:!flag}" @click="select"> 热门排序 </li>
      </ul>
    </div>
    <div class="nav-content">
      <!--最新排序-->
      <div class="content latestSort" :class="{display:flag}">
        <ul class="cf">
          <introduceList-view :child-msg="item" v-for="item in dataList" :key="item.id"></introduceList-view>
          <!--<li class="cf">
            <div class="fl ">
              <img src="/static/img/hyxd.png" alt="" class="fl" />
              <div class="fl ">
                <p class="font28">游戏虫APP下载</p>
                <p>43384人在玩<span> 134.6M</span></p>
                <p>（一句话描述）全新地图 高清新版</p>
              </div>
            </div>
            <div class="fr downDtn ">
              下载
            </div>
          </li>-->
        </ul>
      </div>
      <!--热门排序-->
      <div class="content hotSort" :class="{display:!flag}">热门排序</div>
    </div>
  </div>
</template>

<script>
import leftList from '../components/leftList.vue'
import backTo from '../components/backTo.vue'
import introduceList from '../components/introduceList.vue'
export default {
  name: 'online',
  components: {
    'leftList-view': leftList,
    'introduceList-view': introduceList,
    'backTo-view': backTo
  },
  data () {
    return {
      type: false,
      current: '网络游戏',
      flag: true,
      currentPage: '1',
      pageSize: '1',
      dataList: [
        {
          id: '111111',
          name: '香肠派对',
          imgUrlIcon: '/static/img/left.png',
          gameSize: '110M',
          chosed: false
        },
        {
          id: '2222',
          name: '绝地求生',
          imgUrlIcon: '/static/img/left.png',
          gameSize: '110M',
          chosed: false
        },
        {
          id: '33333',
          name: '绝地求生',
          imgUrlIcon: '/static/img/left.png',
          gameSize: '110M',
          chosed: false
        }
      ],
      classify: {
        type: '游戏分类',
        data: [
          {
            name: '全部',
            has: true
          },
          {
            name: '角色扮演',
            has: false
          },
          {
            name: '动作',
            has: false
          },
          {
            name: '策略',
            has: false
          },
          {
            name: '卡牌',
            has: false
          },
          {
            name: '模拟',
            has: false
          },
          {
            name: '益智',
            has: false
          },
          {
            name: '休闲',
            has: false
          },
          {
            name: '街机',
            has: false
          },
          {
            name: '冒险',
            has: false
          },
          {
            name: '体育',
            has: false
          }
        ]
      }
    }
  },
  created () {
    let onlineAPI = '/pc/gamesByTag/35'
    let that = this
    // 此地有传auth(token)认证 为空就不会执行
    this.$request.get(onlineAPI, false,
      function (res) {
        if (res.data.code === 1000) {
          that.dataList = res.data.rst
        }
      }
    )
  },
  methods: {
    toDetail (id) {
      this.$router.push({path: '/detail', query: {userId: id}})
    },
    select () {
      this.flag = !this.flag
    }
  },
  beforeRouteEnter (to, from, next) {
    next(vm => {
      // 通过 `vm` 访问组件实例
      // console.log(vm)
    })
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不！能！获取组件实例 `this`
    // 因为当守卫执行前，组件实例还没被创建
  }
}
</script>
<style scoped>
  .nav-content .content{
    display:none;
  }
  .nav-content .display{
    display:block;
  }
</style>
